<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="example">
        <div v-bind:style="[baseStyle,fontStyle,styleRadius]">
            <h4>枫桥夜泊</h4>
            <p>
                月落乌啼满霜天，<br>江枫渔火对愁眠。<br>姑苏城外寒山寺，<br>夜半钟声到客船。
            </p>
        </div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#example",
            data:{
                width:400,
                margin:'10px auto',
                padding:30,
                bgcolor:'lightblue',
                family:"华文楷体",
                fontsize:36,
                color:'green',
                align:'center',
                border:'1px solid #cccccc',
                boxShadow:'3px 3px 6px #999999',
                mode:'vertical-rl'
            },
            computed:{
                baseStyle:function(){
                    return{
                        width:this.width + 'px',
                        margin:this.margin,
                        padding:this.padding + 'px',
                        'background-color':this.bgcolor
                    }
                },
                fontStyle:function(){
                    return{
                        'font-family':this.family,
                        fontsize:this.fontsize + 'px',
                        color:this.color,
                        'text-align':this.align
                    }
                },
                styleRadius:function(){
                    return{
                        border:this.border,
                        'box-shadow':this.boxShadow,
                        'writing-mode':this.mode
                    }
                }
            }
        })
    </script>
</body>
</html>